<script setup lang="ts">
import { getDataByPage } from "@/api/modules/attack-portrait/index";

import useUpdate from "@/hooks/useUpdate";
import ConversationViews from "./components/ConversationViews/index.vue";
import { nextTick, reactive, ref, onMounted } from "vue";
import { deepClone } from "@/utils";
const conversationViewsRef = ref(null);


interface Props {
  title?: string;
  rowData?: Object;
  preview?: boolean;
  type: number;
}

const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({});
const loading = ref(false);
const props = withDefaults(defineProps<Props>(), {
  title: "源视图",
  rowData: undefined,
  preview: false,
  type: 1
});
defineOptions({
  name: "UpdateForm" // 默认策略
});

function open() {
  reset();
  openHandle({});
}

onMounted(() => {
  // console.log("mounted");
  // openHandle({});
  // showHandle.value = false;
  // setTimeout(() => {
  //   nextTick(() => {
  //     showHandle.value = true;
  //   });
  // },1000)

});

function getCurrentDate() {
  const date = new Date(); // 获取当前日期
  const year = date.getFullYear(); // 获取年份
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份并补零
  const day = String(date.getDate()).padStart(2, "0"); // 获取日期并补零

  return `${year}-${month}-${day}`; // 返回格式化后的日期
}

const defaultData = {
  page_size: 500,
  time_start: `${getCurrentDate()} 00:00:00`,
  time_end: new Date(),
  ip: ""
};
const formData = reactive(deepClone(defaultData));

function search() {
  if (conversationViewsRef.value) {
    conversationViewsRef.value?.clear();
    conversationViewsRef.value?.toGetLinkList();
    setTimeout(() => {
      searchIp();
    }, 800);
  }
}

function reset() {
  defaultData.time_start = `${getCurrentDate()} 00:00:00`;
  defaultData.time_end = new Date();
  Object.assign(formData, defaultData);
  search();
}

function searchIp() {
  if (conversationViewsRef.value) {
    conversationViewsRef.value?.searchIp(formData.ip);
  }
}
</script>

<template>
  <!--  <div class="update-form mg-r-sm" style="display: inline-block" @click="open">-->
  <!--    <slot>-->
  <!--      <el-button type="primary">访问视图</el-button>-->
  <!--    </slot>-->
  <!--  </div>-->
  <!--  <teleport to="body">-->
  <div v-loading="loading" v-if="showHandle"  class="dialog-box-one" :style="{ backgroundColor: 'rgb(53 53 53)' }">
    <div class="dialog-header-one h-box justify-between">
      <div style="width: 100px; padding-left: 10px; color: #222">
        <p>
          {{ "访问视图" }}
        </p>
      </div>
      <div class="h-box" style="align-items: center">
        <div class="operate h-box">
          <el-form-item label="节点数量">
            <el-select v-model="formData.page_size" style="width: 120px" placeholder="请选择">
              <el-option :value="50" :label="50"></el-option>
              <el-option :value="100" :label="100"></el-option>
              <el-option :value="200" :label="200"></el-option>
              <el-option :value="500" :label="500"></el-option>
              <el-option :value="1000" :label="1000"></el-option>
              <el-option :value="-1" label="不限"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="mg-l-sm" style="width: 220px" label="IP">
            <el-input @input="searchIp" v-model="formData.ip" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="mg-l-sm" label="">
            <base-button @click="search" type="search_icon_text" />
            <base-button @click="reset" type="refresh_icon_text" />
          </el-form-item>
        </div>
      </div>
    </div>
    <div class="dialog-content">
      <conversation-views ref="conversationViewsRef" :searchData="formData" :type="type" :originIp="rowData?.ip || ''" />
    </div>
  </div>
  <!--  </teleport>-->
</template>

<style lang="scss" scoped>
.dialog-box-one {
  //position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
}

.dialog-header-one {
  padding: 15px;
  //box-shadow: 2px 2px 6px 1px rgb(81 73 73 / 10%);
  //position: absolute;
  left: 20px;
  right: 20px;
  top: 5px;
  z-index: 9000;
  //border-radius: 10px;
  background: #fff;
}

.dialog-box-one {
  //position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

.dark-theme {
  .dialog-header-one {
    box-shadow: 3px 1px 1px 0px rgb(116 116 116 / 10%);
  }

  h3 {
    background: #fff;
  }
}

.dialog-content {
  flex: 1;
  background: #fff;
}

.tag-main,
.mind {
  width: 100%;
  height: 100%; // 按自己需求修改
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}
</style>
